<template>
  <div class="">
    <NavBar/>
    <div class="dashboardUser user dashboard-head">
      <div>
        <div class="head item">
          <div class="container">
            <div class="photo photo-level">
              <img :src="me.sysUser.avatar">
              <span :class="[`level`,`level_${me.sysUser.authType}`]"></span>
            </div>
            <div v-if="me.sysUser.authType==='0'||!me.sysUser.authType" class="name">
              <h1 class="ftz24">{{me.sysUser.userAccount}}</h1>
            </div>
            <div v-if="me.sysUser.authType === '1'||me.sysUser.authType === '2'||me.sysUser.authType === '3'" class="name">
              <div>
                <span class="ftz24">{{me.sysUser.authName}}</span>
                <i>我的主页</i>
              </div>
              <div>
                <span>关注 {{me.focusNum}}</span>
                <span>｜</span>
                <span>粉丝 {{me.fansNum}}</span>
              </div>
            </div>
            <div class="fr info">
              <ul>
                <li>
                  <span class="ftz16">{{me.focusNum}}人</span>
                  <p>关注</p>
                </li>
                <li>
                  <span class="ftz16">{{me.questionNum}}次</span>
                  <p>提问</p>
                </li>
                <li>
                  <span class="ftz16">{{me.rewardAmount}}</span>
                  <p>打赏</p>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <!-- <div class="user-account item" v-if="$route.path === '/myasset'">
            <span>账户余额：{{walletData.incomeAll}}中亿币</span>
            <button class="recharge" @click="$router.push('/recharge')">充值</button>
            <button class="fr sign">签到</button>
        </div> -->
        <div class="container">
          <div class="con w82 item fr">
            <div class="item-h layui-nav" lay-filter v-if="routeList.indexOf($route.path)>-1">
              <router-link v-for="item in menusInfo" :key="item.name" class="layui-nav-item ftz16" :to="item.url" :class="{'layui-this':$route.path.indexOf(item.regStr)>=0}">{{item.name}}</router-link>
              <span v-if="$route.path === '/dashboardUser/index'" class="fr">筛选：
                <select @click="changeClassfy()">
                  <option value="">全部</option>
                  <option :value="item.classifyId" v-for="(item, index) in classifyList" :key="index">{{item.classifyName}}</option>
                </select>
              </span>
            </div>
            <transition name="fade" mode="out-in">
              <keep-alive>
                <router-view/>
              </keep-alive>
            </transition>
          </div>
          <SideBar1/>
        </div>
      </div>
    </div>
    <Footer/>
  </div>
</template>
<script>
import NavBar from '@/components/nav-bar'
import Footer from '@/components/footer'
import { mapState } from 'vuex'
import SideBar1 from '@/components/side-bar1'
export default {
  components: {
    NavBar,
    Footer,
    SideBar1
  },
  data () {
    return {
      routeList: ['/dashboardUser/live', '/dashboardUser/qa', '/dashboardUser/viewpoint/', '/dashboardUser/plan/'],
      menusInfo: [
        {
          name: '直播',
          url: '/dashboardUser/live',
          regStr: '/dashboardUser/live'
        },
        {
          name: '问答',
          url: '/dashboardUser/qa',
          regStr: '/dashboardUser/qa'
        },
        {
          name: '观点',
          url: '/dashboardUser/viewpoint/',
          regStr: '/dashboardUser/viewpoint'
        },
        {
          name: '计划',
          url: '/dashboardUser/plan/',
          regStr: '/dashboardUser/plan'
        }
      ],
      loading: false
    }
  },
  computed: {
    // 来源网址
    url () {
      return this.$route.query.url || ''
    },
    curRoute () {
      return this.$route.path
    },
    ...mapState({
      me: state => state.me
    })
  },
  created () {
    this.$store.dispatch('getUserInfo')
  },
  methods: {
    async getWallet () {
      this.loading = true
      let res = await api.getWallet()
      this.walletData = res.data
      this.loading = false
    }
  }
}
</script>
<style lang="scss">
@import "../../style/res/user";
</style>
